<template>
  <transition-group
    name="toast"
    tag="div"
    class="fixed top-4 right-4 z-50 space-y-3 pointer-events-none">
    <div
      v-for="toast in toasts"
      :key="toast.id"
      :class="[
        'pointer-events-auto transform transition-all duration-300 ease-out',
        'bg-white rounded-xl shadow-lg border border-gray-100',
        'min-w-80 max-w-md overflow-hidden',
        'hover:shadow-xl hover:-translate-y-1'
      ]">

      <!-- 主体内容 -->
      <div class="p-4">
        <div class="flex items-start space-x-3">
          <!-- 图标 -->
          <div :class="[
            'flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center',
            getTypeColor(toast.type, 'bg')
          ]">
            <svg
              v-if="toast.type === 'success'"
              class="w-5 h-5 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>

            <svg
              v-else-if="toast.type === 'error'"
              class="w-5 h-5 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>

            <svg
              v-else-if="toast.type === 'warning'"
              class="w-5 h-5 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
            </svg>

            <svg
              v-else
              class="w-5 h-5 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>

          <!-- 文本内容 -->
          <div class="flex-1 min-w-0">
            <h4 v-if="toast.title" class="text-sm font-semibold text-gray-900 mb-1">
              {{ toast.title }}
            </h4>
            <p class="text-sm text-gray-700 leading-relaxed">
              {{ toast.message }}
            </p>
          </div>

          <!-- 关闭按钮 -->
          <button
            @click="removeToast(toast.id)"
            class="flex-shrink-0 w-6 h-6 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors duration-200 group"
          >
            <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600" fill="none" stroke="currentColor"
                 viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>

        <!-- 进度条 -->
        <div v-if="toast.duration > 0" class="mt-3 h-1 bg-gray-100 rounded-full overflow-hidden">
          <div
            :class="[
              'h-full transition-all ease-linear',
              getTypeColor(toast.type, 'progress')
            ]"
            :style="{ 
              width: getProgressWidth(toast) + '%',
              transitionDuration: '100ms'
            }"
          ></div>
        </div>
      </div>
    </div>
  </transition-group>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      toasts: [],
      progressIntervals: new Map()
    };
  },
  methods: {
    addToast(toast) {
      const id = Date.now() + Math.random();
      const newToast = {
        id,
        type: toast.type || "info",
        title: toast.title,
        message: toast.message,
        duration: toast.duration !== undefined ? toast.duration : 4000,
        startTime: Date.now(),
        progress: 100
      };

      this.toasts.push(newToast);

      // 自动移除
      if (newToast.duration > 0) {
        this.startProgress(newToast);
        setTimeout(() => {
          this.removeToast(id);
        }, newToast.duration);
      }
    },

    removeToast(id) {
      const index = this.toasts.findIndex(toast => toast.id === id);
      if (index > -1) {
        this.clearProgress(id);
        this.toasts.splice(index, 1);
      }
    },

    startProgress(toast) {
      if (toast.duration <= 0) return;

      const interval = setInterval(() => {
        const elapsed = Date.now() - toast.startTime;
        const progress = Math.max(0, 100 - (elapsed / toast.duration) * 100);
        toast.progress = progress;

        if (progress <= 0) {
          this.clearProgress(toast.id);
        }
      }, 50);

      this.progressIntervals.set(toast.id, interval);
    },

    clearProgress(id) {
      const interval = this.progressIntervals.get(id);
      if (interval) {
        clearInterval(interval);
        this.progressIntervals.delete(id);
      }
    },

    getProgressWidth(toast) {
      return toast.progress || 0;
    },

    getTypeColor(type, variant) {
      const colors = {
        success: {
          bg: "bg-emerald-500",
          bar: "bg-gradient-to-r from-emerald-400 to-emerald-500",
          progress: "bg-gradient-to-r from-emerald-400 to-emerald-500"
        },
        error: {
          bg: "bg-pink-500",
          bar: "bg-gradient-to-r from-pink-400 to-pink-500",
          progress: "bg-gradient-to-r from-pink-400 to-pink-500"
        },
        warning: {
          bg: "bg-orange-500",
          bar: "bg-gradient-to-r from-orange-400 to-orange-500",
          progress: "bg-gradient-to-r from-orange-400 to-orange-500"
        },
        info: {
          bg: "bg-cyan-500",
          bar: "bg-gradient-to-r from-cyan-400 to-cyan-500",
          progress: "bg-gradient-to-r from-cyan-400 to-cyan-500"
        }
      };

      return colors[type]?.[variant] || colors.info[variant];
    }
  },

  beforeDestroy() {
    // 清理所有定时器
    this.progressIntervals.forEach(interval => clearInterval(interval));
    this.progressIntervals.clear();
  }
};
</script>

<style scoped>

/* 悬停暂停动画 */
.toast-item:hover .progress-bar {
  animation-play-state: paused;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #62dbb7, #40aad4);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #4ade80, #0ea5e9);
}
</style>